<template>
  <div class="bangumis">
    <h2 align="center" style="margin: 10px 0; color: #24292E;">追番列表</h2>
    <div class="bangumi-list" v-if="JSON.stringify(watchingList) !== '{}'">
      <div class="bangumi-list-item"
        v-for="(item, index) in watchingList"
        :key="item.subject_id + '-' + index"
      >
        <a :href="item.subject.url" target="_blank">
          <img :src="getHttpsImg(item.subject.images.common)">
          <span class="item-name_cn" :title="item.subject.name_cn">{{item.subject.name_cn}}</span>
          <span class="item-name" :title="item.subject.name">{{item.subject.name}}</span>
          <span v-text="getAirDate(item.subject.air_date)"></span>
          <span v-text="isFinish(item.subject.air_date, item.subject.eps_count)"></span>
          <i-circle
            :trail-width="4"
            :stroke-width="5"
            :size="80"
            :percent="(item.ep_status/item.subject.eps_count) * 100"
            stroke-color="#ff6690">
            <div>
              <span class="number">{{item.ep_status}}</span> / 
              <span class="number"v-text="epsCount(item.subject.eps_count)"></span>
            </div>
            <div style="font-size: 10px; padding-top: 5px; color: #858585">追番进度</div>
          </i-circle>
        </a>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'BangumiBox',
  props: {
    watchingList: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  methods: {
    // 将http替换成https 确保能正确获取图片
    getHttpsImg(imgUrl) {
      return 'https://' + imgUrl.split('//')[1]
    },
    getAirDate(date) {
      var year = date.split('-')[0]
      var month = date.split('-')[1] - 0
      var day = date.split('-')[2] - 0
      return '放送开始: ' + year + '年' + month + '月' + day + '日'
    },
    // 判断番剧是否完结
    isFinish(airDate, count) {
      if (count != undefined) {
        var date = new Date(airDate)
        // 得到更新完成日期 (每周一更没有断更的理想情况...)
        date.setDate(date.getDate() + (count-1)*7)
        // 更新完成日期 < 当前日期
        if (date.getTime() < new Date().getTime()) {
          return '已完结'
        } else {
          return '连载中 · 每' + this.getWeek(date.getDay()) + '更新'
        }
      } else {
        return '连载中 · 每' + this.getWeek(new Date(airDate).getDay()) + '更新'
      }
    },
    getWeek(weekNum) {
      switch(weekNum) {
        case 0: return '周日'; break
        case 1: return '周一'; break
        case 2: return '周二'; break
        case 3: return '周三'; break
        case 4: return '周四'; break
        case 5: return '周五'; break
        case 6: return '周六'; break
      }
    },
    epsCount(eps_count) {
      return eps_count != undefined ? eps_count : '??'
    }
  },
}
</script>

<style lang="scss" scoped>
.bangumis {
  padding-bottom: 2rem;
}
.bangumi-list {
  width: 100%;
  overflow: auto;
  &>.bangumi-list-item {
    position: relative;
    float: left;
    overflow: hidden !important;
    margin: 5px;
    padding: 10px;
    width: calc(50% - 10px);
    height: 120px;
    border-radius: 8px;
    transition: all 0.5s ease;
    //box-shadow: 2px 2px 5px rgb(212, 212, 212);
    a {
      color: #666666;
      img {
        float: left;
        width: 70px;
        height: 100px;
        margin-right: 5px;
      }
      span {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        overflow: hidden;
        line-height: 25px;
        width: 58%;
        &.number {
          display: inline;
        }
      }
      .ivu-chart-circle {
        position: absolute;
        right: 10px;
        top: 20px;
      }
    }
  }
}
@media screen and (max-width: 850px) {
  .bangumi-list>.bangumi-list-item {
    width: calc(50% - 10px) !important;
  }
}
@media screen and (max-width: 750px) {
  .bangumi-list>.bangumi-list-item {
    width: calc(100% - 10px) !important;
  }
}
@media screen and (max-width: 420px) {
  .bangumi-list>.bangumi-list-item span {
    font-size: 13px;
    width: 55% !important;
  }  
  .ivu-chart-circle {
    top: 30px !important;
    width: 60px !important;
    height: 60px !important;
  }
}
</style>